import BackBtn from '@components/globalComponents/BackBtn';
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { Col, Row } from 'antd';
import { useRef } from 'react';
import './index.css';

function Agent3D() {
  const dotLottieRobotRef: any = useRef(null);
  const dotLottieProcessorRef: any = useRef(null);
  return (
    <div className="agent-3d-container">
      {/* 返回首页按钮 */}
      <div>
        <BackBtn />
      </div>
      {/* 顶部标题栏 */}
      <div className="flex items-center justify-between" />
      {/* 3D 模型展示区域
        展示该路径的glb文件，assets/3d-resource/Sheep-animation/low_poly_alpaca.glb
      */}
      <Row gutter={16}>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>AI Processor</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/AiProcessor.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
              dotLottieRefCallback={(dotLottie) => {
                dotLottieProcessorRef.current = dotLottie;
              }}
            />
            <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
              <button onClick={() => dotLottieProcessorRef.current?.play()}>
                Play
              </button>
              <button onClick={() => dotLottieProcessorRef.current?.pause()}>
                Pause
              </button>
              <button onClick={() => dotLottieProcessorRef.current?.stop()}>
                Stop
              </button>
              <button onClick={() => dotLottieRobotRef.current?.setFrame(30)}>
                Seek to frame 30
              </button>
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>Robot</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/Robot-Bot.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
              dotLottieRefCallback={(dotLottie) => {
                dotLottieRobotRef.current = dotLottie;
              }}
            />
            <div style={{ display: 'flex', gap: '8px', marginTop: '16px' }}>
              <button onClick={() => dotLottieRobotRef.current?.play()}>
                Play
              </button>
              <button onClick={() => dotLottieRobotRef.current?.pause()}>
                Pause
              </button>
              <button onClick={() => dotLottieRobotRef.current?.stop()}>
                Stop
              </button>
              <button onClick={() => dotLottieRobotRef.current?.setFrame(30)}>
                Seek to frame 30
              </button>
            </div>
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>Woman1</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/Woman1.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
            />
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>Woman1</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/ShoppingBag.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
            />
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>TypingAnimation</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/TypingAnimation.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
            />
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>IsometricDataAnalysis</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/IsometricDataAnalysis.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
            />
          </div>
        </Col>
        <Col className="gutter-row" span={12}>
          <div className="w-full h-full">
            <h3>iconfont-letMeLook</h3>
            <DotLottieReact
              src="http://127.0.0.1:9981/lottieJSON/iconfont-letMeLook.json"
              loop
              autoplay
              style={{ maxWidth: '600px' }}
            />
          </div>
        </Col>
      </Row>
      {/* 底部控制栏 */}
      <div className="flex items-center justify-between">
        <div className="flex space-x-2" />
        <div className="text-sm text-gray-500" />
      </div>
    </div>
  );
}

export default Agent3D;
